<template>
	<view>
		<view class="navbg"></view>
		<view class="navbar">
			<view class="iconfont fontstyle" @click="gotoback">&#xe616;</view>
			<navigator url="/pages/recharge/recording" class="bill">账单</navigator>
		</view>
		<view class="title">
			余额充值
		</view>
		<view class="rephone">
			<view class="phonebox">
				<view>账号余额</view>
				<view class="phonestyle">
					¥{{selfmoney.prestore_balance}}元
				</view>
			</view>
			<!-- <view class="phonetip">每天开启不一样的惊喜</view> -->
		</view>
		<view class="balance">
			<view>预存话费面值</view>
		</view>
		<view class="rechargemoney">
			<view :class="['moneyitem',tabindex==index?'hoveritem':''] " v-for="(item,index) in listdate" :key="index" @click="choiceprice(index)">
				<text class="price">{{item.money}} 元</text>
				<text class="descr">赠送：¥ {{item.actual}}</text>
			</view>
		</view>
		<view class="comfir" @click="recharge">
			立即充值
		</view>
		<!--相关事项-->
		<view class="rechargetip">
<!-- 		<view>{{prestore}}</view> -->
		<jyf-parser  :html="prestore"></jyf-parser>
		</view>
		<!--预存成功提示-->
		<recharge-storetip :visible="visible" :userdata="userinfo" :levelbgimg="levelbgimg">
			<view class="storetip-content">
				<view class="tiptitle">
					{{rechargesuccess.success_title}}
				</view>
				<view class="tipdescr">{{rechargesuccess.success_content}}</view>
				<view class="button" @click="gotoback">完成</view>
			</view>
		</recharge-storetip>
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	/**
	 * 充值页面
	 */
	export default {
		data() {
			return {
				globelloading: true,
				balance: 0,
				tabindex: 0,
				listdate: [],
				userinfo: {},
				visible: false, 
				rechargesuccess: {
					success_img: '',
					success_title: '',
					success_content: '' 
				},
				levelbgimg:'',//升级后的背景图片
				prestore: getApp().globalData.ruleconfig.prestore,
			}
		},
		onLoad(option) {
			this.redenomination()
			//记录今天是否访问过此页面
			this.$redpoint(option);
			uni.$on("closewindown", (option) => {
				this.visible = option;
			})
			
		},
		
		computed:{
			selfmoney(){
				return this.$common.state.userrecharge;
			}
		},
		watch: {
			listdate() {
				this.globelloading = false
			}
		},
		methods: {
			//返回上一页
			gotoback() {
				this.visible = false;
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 800)
			},
			//刷新用户信息
			refreshUser() {
				this.userinfo = uni.getStorageSync('user_info');
				console.log(this.userinfo);
			},
			//选择价格
			choiceprice(index) {
				this.tabindex = index
				this.rechargesuccess = this.listdate[index];
				//console.log(this.rechargesuccess);
			},
			//获取充值面额
			redenomination() {
				this.$HttRequest({
					url: '/memberPrestore/lists',
					param: ''
				}).then((ret) => {
					console.log(ret);
					if (ret.status === 10000) {
						this.listdate = ret.data.prestore
						//设置总价格
						this.$common.state.userrecharge.prestore_balance = ret.data.prestore_balance
						//初始化价格数据
						this.choiceprice(0)
						//更新用户信息
						this.refreshUser() 
					} else {
						this.$ShowMsg(ret.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error)
				});
			},

			recharge() {
				let _this = this
				let rechargeinfo = _this.listdate[_this.tabindex]
				_this.$HttRequest({
					url: '/memberPrestore/payment',
					param: {
						money: rechargeinfo.money
					}
				}, 'POST', true).then((ret) => {
					//console.log(ret);
					if (ret.status === 10000) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: ret.data, //微信、支付宝订单数据
							success: function(res) {
								_this.visible = true
								//设置用户充值后的会员等级
								let level =_this.tabindex+1;
								_this.levelbgimg = '/static/image/member_'+level+'.png'
								//更改内存等级
								_this.$changefield('level',level);
								_this.$common.state.userrecharge.prestore_balance += rechargeinfo.money + rechargeinfo.actual
							},
							fail: function(err) {
								_this.$ShowMsg('订单已取消，余额充值失败！')
							}
						});
					} else {
						_this.$ShowMsg(ret.message);
					}
				}).catch((error) => {
					//异常错误
					_this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			gotoback() {
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style lang="scss">
	.storetip-content {
		margin: 20rpx auto;
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.button {
			margin: 20rpx 0;
			color: #fff;
			font-size: 32rpx;
			width: 80%;
			height: 80rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $uni-color-primary;
		}

		.tiptitle {
			margin: 10rpx 0;
			font-size: 40rpx;
			color: #f56c50;
		}

		.tipdescr {
			margin: 10rpx 0;
			font-size: 30rpx;
			color: #4d4d4d;
		}
	}

	.navbg {
		background-image: url('/static/image/recharge_bg.png');
		background-position: left top;
		background-size: 50% 307rpx;
		background-repeat: no-repeat;
		width: 100%;
		height: 307rpx;
		position: absolute;
		z-index: -1;
		transform: scaleX(-1) scaleY(-1);
		top: 0;
		left: 0;
	}

	.myphonebook {

		font-weight: bold;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
		height: auto;

		.realname {
			font-size: 35rpx;
			margin: 10rpx 0;
		}

		.phonebookitem {
			width: 100%;
			padding: 20rpx 0;
			background-color: #F8F8F8;
			margin: 10rpx 0;
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #808080;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
		}
	}

	.comfir {
		width: 90%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx auto;
		border-radius: 20rpx;
		margin-top: 80rpx;
	}

	.rechargetip {
		margin: 30rpx auto;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		font-size: 28rpx;
		color: #9c999d;
		
		text {
			margin: 10rpx 0;
		}
	}

	.rechargemoney {
		width: 90%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		.moneyitem {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #999;
			font-size: 25rpx;
			border: 1rpx solid #d7d7d7;
			width: 200rpx;
			height: 150rpx;
			border-radius: 20rpx;
			box-shadow: 0 5rpx 8rpx #dadada;
			margin-bottom: 20rpx;

			.price {
				margin-bottom: 10rpx;
				font-weight: bold;
				font-size: 35rpx;
				color: $uni-color-primary;
			}

			.descr {
				font-weight: bold;
			}
		}

		.hoveritem {
			color: #fff;
			background-color: $uni-color-primary;
			border: 1rpx solid $uni-color-primary;
			box-shadow: 0 5rpx 8rpx $uni-color-primary;

			.price {
				color: #fff;
			}
		}
	}

	.balance {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 38rpx;
		width: 90%;
		color: #9c999d;
		margin: 30rpx auto;

		.money {
			font-size: 30rpx;


			.redcolor {
				color: #FF0000;
			}
		}
	}

	//充值号码
	.rephone {
		width: 90%;
		margin: 0 auto;
		padding: 35rpx 0;
		border-bottom: 1rpx solid #F1F1F1;

		.phonebox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			font-size: 35rpx;

			.phonestyle {

				font-weight: bold;
				font-size: 50rpx;
			}


		}


		.phonetip {
			font-size: 35rpx;
			color: #9c999d;
		}
	}

	.title {
		width: 90%;
		display: flex;
		justify-content: flex-start;
		margin: 0rpx auto;
		font-size: 45rpx;
		color: #1e2220;
		font-weight: bold;
	}

	.navbar {

		width: 90%;
		margin: 40rpx auto;
		margin-bottom: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333;

		.fontstyle {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 38rpx;
			color: #333;
			transform: rotateY(180deg);
		}

		.bill {
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>
